<template>
	<view class="login">
		<view class="login-main">

			<template v-if="!status">

				<view class="login-logo">
					<image src="/pagesA/static/img/logo.png"></image>
				</view>

				<view class="login-list flex border-all">
					<view class="myicon2">
						<image src="/pagesA/static/img/icon/zhanghao.png"></image>
					</view>
					<view class="login-input">
						<input type="text" v-model="username" maxlength="11" name="username" placeholder="请输入账号"
							class="is-input1" />
					</view>
				</view>

				<view class="login-list flex border-all">
					<view class="myicon2">
						<image src="/pagesA/static/img/icon/mima.png"></image>
					</view>
					<view class="login-input">
						<input name="password" placeholder="请输入密码" class="is-input1" password="true"
							v-model="password" />
					</view>
				</view>

				<view class="" style="margin-top: 20px;">

					<button style="background-color:#F14399;" type="primary" @click="submit">登录</button>
				</view>

				<view class="" style="margin-top: 20px;">

					<button style="background-color:#007affb5;" type="primary" @click="chuce">注册</button>
				</view>

				<view class="" style="margin-top: 20px;display: flex;">

					<view class="myicon2">
						<image src="/pagesA/static/img/icon/weixin.png"></image>
					</view>

					<view class="" style="margin-left: 5px;"><text style="font-size: 14px;">微信登录</text></view>
					<view class="" @click="chuce" style="font-size: 14px;margin-left: 22px;">
						<text>注册</text>
					</view>
					<view class="" @click="mima" style="font-size: 14px;margin-left: 22px;">
						<text>找回密码</text>
					</view>

				</view>



			</template>

		</view>

	</view>
</template>

<script>
import uniStatusBar from '@/common/uni-status-bar/uni-status-bar.vue';

export default {
	components: {
		uniStatusBar,
	},
	data() {
		return {
			status: false,
			username: "",
			password: "",
			phone: "",
			code: "",
			codeTime: 0,
			loading: false,
			referrer_id: 0,
		}
	},
	onLoad(options) {
		this.referrer_id = options.referrer_id;
		this.clear();
	},
	computed: {
		disabled() {
			if ((this.username === '' || this.password === '') && (this.phone === '' || this.code === '' || this.rpassword === '')) {
				return true
			}
			return false
		}
	},
	methods: {
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		//强制刷新，并清除全部缓存
		async clear() {
			uni.clearStorageSync();
			uni.clearStorage();
		},

		// 初始化表单
		initForm() {
			this.username = ''
			this.password = ''
			this.phone = ''
			this.code = ''
		},
		//注册跳转
		chuce() {
			uni.showModal({
				title: '注册会员协议声明',
				content: '[单身男女] 是严肃的征婚相亲平台，为了维护诚信及安全的互联网环境。所有注册用户必须认真阅读并同意注册条款与协议，用户需对填写信息的真实性及行为承担法律责任。点击同意并遵守开始注册。',
				success: function (res) {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pagesA/login/register/register'
						})

					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});

		},
		//找回密码
		mima() {
			uni.navigateTo({
				url: '/pages/login/register/rpassword'
			});
		},
		// 切换登录方式
		changeStatus() {
			// 初始化表单
			this.initForm()
			this.status = !this.status
		},

		// 表单验证
		// validate() {
		// 	//手机号正则
		// 	var mPattern = /^1[345789]\d{9}$/;
		// 	if (!mPattern.test(this.phone)) {
		// 		uni.showToast({
		// 			title: '手机号格式不正确',
		// 			icon: 'none'
		// 		});
		// 		return false
		// 	}
		// 	// ...更多验证
		// 	return true
		// },
		// 提交
		async submit() {
			// 表单验证
			const res = await this.$myRuquest({ 
				url: '/index/dsnv.activities/login',
				data: {
					"username": this.username,
					"password": this.password,
					"referrer_id": this.referrer_id,
				},

			})
			if (res.data.code == 200) {
				//存储缓存
				uni.setStorageSync('my_info', res.data.data);

				setTimeout(() => {
				uni.switchTab({
					url: '/pages/index/index'
				});
				}, 400)


			} else {
				uni.showToast({
					title: res.data.info,
					duration: 3000,
					icon: 'none'
				})

			}

		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #FFFFFF;
}

.myicon2 image {
	width: 25px;
	height: 25px;

}

.flex {
	display: flex;
}

.login {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.login-main {
	flex: 1;
	padding: 0 70upx;

	.login-logo {
		width: 200upx;
		height: 200upx;
		padding-bottom: 50upx;
		margin: 50upx auto 0 auto;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.logo-tip {
		text-align: center;
		padding-top: 25upx;
		font-size: 32upx;
		font-weight: 200;
		color: rgba(51, 51, 51, 1);
		padding-bottom: 50upx;
	}

	.login-list {
		margin-top: 35upx;
		height: 100upx;
		align-items: center;
		padding: 0 30upx;
		border: 1px solid #E8E8E8;
		border-radius: 25px;

		&.border-all {
			&:after {
				border: 1px solid #D0D0D0;
				border-radius: 100upx;
			}
		}

		.iconfont {
			width: 65upx;
			font-size: 44upx;
			align-items: center;

			&:after {
				margin-left: 20upx;
				content: '';
				width: 2upx;
				height: 35upx;
				background: #D0D0D0;
				display: block;
			}
		}

		.login-input {
			flex: 1;

			input {
				font-size: 28upx;
				color: #333333;
				padding-left: 20upx;
			}
		}

		.code-sx {
			content: '';
			width: 2upx;
			height: 25upx;
			background: #D0D0D0;
			margin-right: 25upx;
		}

		.codeimg {
			font-size: 24upx;
			color: #999999;
		}
	}

	.login-btn {
		margin-top: 70upx;
		height: 96upx;
		width: 100%;
		background: linear-gradient(-90deg, rgba(80, 85, 168, 1), rgba(104, 110, 210, 1));
		border-radius: 47upx;
		font-size: 34upx;
		color: #ffffff;
	}


}

.buttom {
	display: flex;
	margin-top: 15px;
	margin-left: 20%;
	text-align: right;

	text {
		padding: 0 30px;
		color: #007AFF;
		font-size: 20px;
	}
}
</style>
